<script setup lang="ts">
import { ref, onMounted } from 'vue'
import {useRouter} from 'vue-router'
import {get} from '@/api/api'
import {typeList} from '@/utils/index'
import { Search } from '@element-plus/icons-vue'

const router = useRouter()

const queryType = ref('')
const toPrev = () => {
    router.push('/mine')
}

const data = ref(typeList)
const input = ref('')

const statusList = ref([])
const typeIndex = ref(0)
const getStatusData = async () => {
    let params = {
        queryType: queryType.value,
        key: input.value
    }
    const res = await get('/c/query/order/list', params);
    statusList.value = res.data?.data.content || []
}

const setProgress = (item: any) => {
    return data.value.filter((i) => { return i.key === item})[0]?.name
}
const inpChange = () => {
    getStatusData()
}
onMounted(() => {
    getStatusData()
})
const changeType = (key: string, index: number) => {
    typeIndex.value = index
    queryType.value = key === 'all' ? '' : key
    getStatusData()
}

</script>

<template>

  <div class="my">
    <div class="my-top">
        <div class="my-nav">
            <img src="@/assets/toPrev.png" alt=""  @click="toPrev()">
            <div class="my-item">查询记录</div>
        </div>
        <el-input v-model="input" placeholder="输入姓名或者订单号搜索" @change="inpChange" :prefix-icon="Search" clearable />
        <div  class="my-item2">
            <span class="my-item1" v-for="(item, index) in data" :key="index" :class="{active: index === typeIndex}"  @click="changeType(item.key, index)">{{ item.name }}</span>
        </div>
    </div>
    <div class="my-search">
        <div class="my-search-item" v-for="(item, index) in statusList" :key="index">
            <div class="title">
                <span>{{setProgress(item.queryType)}}</span>
                <span></span>
            </div>
            <div class="info"><span>查询姓名</span><span>{{item.queryName}}</span></div>
            <div class="info"><span>查询时间</span><span>{{item.createTime}}</span></div>
            <div class="info"><span>订单编号</span><span>{{item.code}}</span></div>
        </div>
    </div>
  </div>
</template>

<style scoped>
.my{
    background-color: #f6f6f6;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.my-nav{
    position: relative;
    padding-top: 25px;
    margin-bottom: 12px;
}
.el-input{
    margin: 10px 16px;
    width: 92%;
}
.my-nav span{
    position: absolute;
    left: 16px;
}
.my-top{
    padding-bottom: 16px;
    background: #fff;
}
.my-top img {
    width: 10px;
    display: inline-block;
    padding-top: 25px;
    padding-left: 5px;
    top: 0;
    position: absolute;
    left: 16px;
}
.my-item{
    text-align: center;
    width: 100%;
}

.my-item2{
    display: flex;
        margin: 0 16px;
    margin-top: 12px;
    align-items: center;
    overflow-y: scroll;
}
/* 隐藏滚动条的样式 */
::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}
.my-item1{
    margin: 0 12px;
    height: 30px;
    line-height: 30px;
    font-size: 13px;
    color: #666666;
    white-space: nowrap;
}
.my-item2{
    display: flex;
}
:deep(.el-button){
    border-radius: 20px;
    margin-top: 6px;
}
.count{
    color: #2863FD;
    font-size: 28px;
    font-weight: bold;
}
.my-search-item{
    margin: 13px 16px;
    background: #fff;
    padding: 16px;
    border-radius: 10px;
    padding-bottom: 4px;
    margin-top: 0px;
}
.title {
    border-bottom: 1px solid #EBEBEB;
    padding-bottom: 10px;
}
.info{
    display: flex;
    justify-content: space-between;
    margin: 13px 0;
    font-size: 15px;
    align-items: center;
}
.info span:last-child{
    color: #999999;
    font-size: 13px;
}

.my-search {
    height: calc(100vh - 188px);
    overflow-y: scroll;
    margin-top: 12px;
}

.active{
    color: #346EFE;
    padding: 2px 16px;
    height: 30px;
    border-radius: 20px;
    background: #E1E9FF;
    text-align: center;
    font-size: 14px; 
}
.my-item2{
    display: flex;
        margin: 0 16px;
    margin-top: 12px;
    align-items: center;
    overflow-y: scroll;
}
:deep(.el-button){
    border-radius: 20px;
    margin-top: 6px;
}
.title {
    border-bottom: 1px solid #EBEBEB;
    padding-bottom: 10px;
    display: flex;
    justify-content: space-between;
}
:deep(.el-input__wrapper){
    border-radius: 20px;
    background: #F6F6F6;
    box-shadow: none;
}
.info{
    display: flex;
    justify-content: space-between;
    margin: 13px 0;
    font-size: 15px;
    align-items: center;
}
.info span:last-child{
    color: #999999;
    font-size: 13px;
}

/* 隐藏滚动条的样式 */
::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}
.pending{
    color: #FF0505;
}
.finished{
    color: #4CB65B;
}
</style>
